<template>
	<view class="container">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="nav-bar">
				<view class="nav-left" @click="goBack">
					<view class="back-arrow"></view>
				</view>
				<view class="nav-title">确认订单</view>
				<view class="nav-right">
					<view class="nav-icon-dot"></view>
					<view class="nav-icon-line"></view>
					<view class="nav-icon-circle"></view>
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<scroll-view class="content" scroll-y>
			<!-- 进度指示器 -->
			<view class="progress-section">
				<view class="progress-step" :class="{ 'active': currentStep >= 1, 'completed': currentStep > 1 }">
					<view class="step-circle step-blue">
						<text class="step-text">预约服务</text>
					</view>
				</view>
				<view class="progress-line progress-line-1" :class="{ 'active': currentStep >= 2 }"></view>
				<view class="progress-step" :class="{ 'active': currentStep >= 2, 'completed': currentStep > 2 }">
					<view class="step-circle step-green">
						<text class="step-text">支付订单</text>
					</view>
				</view>
				<view class="progress-line progress-line-2" :class="{ 'active': currentStep >= 3 }"></view>
				<view class="progress-step" :class="{ 'active': currentStep >= 3 }">
					<view class="step-circle step-orange">
						<text class="step-text">门店服务</text>
					</view>
				</view>
			</view>

			<!-- 门店信息 -->
			<view class="store-section">
				<image class="store-icon" src="/static/image/carmaintenance/商家@3x.png" mode="aspectFit"></image>
				<view class="store-info">
					<text class="store-name">{{ storeInfo.name }}</text>
					<text class="store-address">{{ storeInfo.address }}</text>
				</view>
			</view>

			<!-- 用户和预约详情 -->
			<view class="appointment-section">
				<view class="appointment-item" @click="selectContact">
					<image class="appointment-icon" src="/static/image/carmaintenance/人员@3x.png" mode="aspectFit"></image>
					<text class="appointment-label">{{ contactInfo.name }}</text>
					<text class="appointment-value">{{ contactInfo.phone }}</text>
					<image class="arrow-icon" src="/static/image/carmaintenance/收起箭头小@3x.png" mode="aspectFit"></image>
				</view>
				<view class="appointment-item" @click="selectAppointmentTime">
					<image class="appointment-icon" src="/static/image/carmaintenance/车辆-01@3x.png" mode="aspectFit"></image>
					<text class="appointment-label">立即预约</text>
					<text class="appointment-value" v-if="appointmentTimeText">{{ appointmentTimeText }}</text>
					<image class="arrow-icon" src="/static/image/carmaintenance/收起箭头小@3x.png" mode="aspectFit"></image>
				</view>
				<view class="appointment-item" @click="selectCar">
					<image class="appointment-icon" src="/static/image/carmaintenance/车辆-01@3x(1).png" mode="aspectFit"></image>
					<text class="appointment-label">{{ carInfo.model }}/{{ carInfo.plate }}</text>
					<image class="arrow-icon" src="/static/image/carmaintenance/收起箭头小@3x.png" mode="aspectFit"></image>
				</view>
			</view>

			<!-- 服务产品 -->
			<view class="service-products-section">
				<view class="section-header">
					<text class="section-title">服务产品</text>
					<text class="section-count">共选择<text class="count-number">{{ selectedServiceList.length }}</text>项服务产品</text>
				</view>
				<view class="service-products-list">
					<view class="service-product-item" v-for="(service, index) in selectedServiceList" :key="index">
						<text class="product-name">{{ service.name }}</text>
						<text class="product-price">¥{{ service.currentPrice }}</text>
					</view>
				</view>
			</view>

			<!-- 代金券/优惠券 -->
			<view class="coupon-section" @click="selectCoupon">
				<image class="coupon-icon" src="/static/image/carmaintenance/优惠券@3x.png" mode="aspectFit"></image>
				<text class="coupon-label">代金券/优惠券</text>
				<text class="coupon-discount" v-if="discount > 0">-{{ discount }}元</text>
				<image class="arrow-icon" src="/static/image/carmaintenance/收起箭头小@3x.png" mode="aspectFit"></image>
			</view>
		</scroll-view>

		<!-- 预约时间选择弹窗（滑动选择） -->
		<uni-popup ref="timePopup" type="center" :is-mask-click="false">
			<view class="time-popup">
				<view class="popup-title">预约时间</view>
				<view class="popup-date-reference">{{ currentDateText }}</view>
				<picker-view class="time-picker" :value="[tempPickerIndex]" @change="onPickerChange" indicator-style="height: 80rpx;">
					<picker-view-column>
						<view class="picker-item" v-for="(opt, i) in pickerOptions" :key="i">{{ opt }}</view>
					</picker-view-column>
				</picker-view>
				<view class="popup-buttons">
					<view class="popup-btn cancel-btn" @click="closeTimePopup">取消</view>
					<view class="popup-btn confirm-btn" @click="confirmTimeSelection">确定</view>
				</view>
			</view>
		</uni-popup>

		<!-- 支付密码弹窗 -->
		<uni-popup ref="payPopup" type="center" :is-mask-click="false">
			<view class="pay-popup">
				<view class="pay-header">
					<text class="pay-title">请输入支付密码</text>
					<text class="pay-subtitle">车辆服务平台</text>
					<text class="pay-amount">¥ {{ totalPrice }}</text>
				</view>
				<view class="pay-method-row">
					<text class="pay-method-label">支付方式</text>
					<text class="pay-method-value">零钱</text>
				</view>
				<view class="pay-password-box" @click="focusPayInput">
					<view class="pay-digit" v-for="i in 6" :key="i">
						<view class="pay-dot" v-if="payPassword.length >= i"></view>
					</view>
					<input ref="payHiddenInput" class="pay-hidden-input" type="number" maxlength="6" v-model="payPassword" @input="onPayInput" />
				</view>
				<view class="pay-actions">
					<view class="pay-cancel" @click="closePayPopup">取消</view>
				</view>
			</view>
		</uni-popup>

		<!-- 底部固定栏 -->
		<view class="bottom-bar">
			<view class="service-btn" @click="contactService">
				<image class="service-icon" src="/static/image/carmaintenance/客服@3x.png" mode="aspectFit"></image>
				<text class="service-text">联系客服</text>
			</view>
			<view class="total-info">
				<text class="total-label">合计:</text>
				<text class="total-price">¥{{ totalPrice }}</text>
			</view>
			<view class="submit-btn" @click="submitOrder">
				<text class="submit-text">提交订单</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';

	// 当前步骤（1-预约服务，2-支付订单，3-门店服务）
	const currentStep = ref(1);

	// 门店信息
	const storeInfo = ref({
		name: '伟业汽车美容店 (人民路店)',
		address: '山阳区人民中路33号'
	});

	// 联系人信息
	const contactInfo = ref({
		name: '张先生',
		phone: '18656894566'
	});

	// 车辆信息
	const carInfo = ref({
		model: '奔驰FWE4',
		plate: '豫A56487'
	});

	// 选中的服务列表
	const selectedServiceList = ref([]);

	// 折扣金额
	const discount = ref(10);

	// 支付相关
	const payPopup = ref(null);
	const payPassword = ref('');
	const payHiddenInput = ref(null);

	// 预约时间相关
	const timePopup = ref(null);
	const selectedTimeIndex = ref(-1); // -1 表示“立即预约”
	// picker 的索引：0 对应“立即预约”，其余依次对应 timeOptions
	const tempPickerIndex = ref(0);
	
	// 生成时间选项
	const generateTimeOptions = () => {
		const options = [];
		const today = new Date();
		const tomorrow = new Date(today);
		tomorrow.setDate(tomorrow.getDate() + 1);
		const dayAfterTomorrow = new Date(today);
		dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2);
		const day3 = new Date(today);
		day3.setDate(day3.getDate() + 3);
		
		const formatDate = (date) => {
			const month = date.getMonth() + 1;
			const day = date.getDate();
			return `${month}月${day}日`;
		};
		
		const getDayLabel = (date) => {
			const today = new Date();
			const diff = Math.floor((date - today) / (1000 * 60 * 60 * 24));
			if (diff === 0) return '(今天)';
			if (diff === 1) return '(明天)';
			if (diff === 2) return '(后天)';
			return '';
		};
		
		options.push({
			dateLabel: formatDate(today) + getDayLabel(today),
			time: '14:00',
			fullDate: today
		});
		
		options.push({
			dateLabel: formatDate(tomorrow) + getDayLabel(tomorrow),
			time: '09:00',
			fullDate: tomorrow
		});
		
		options.push({
			dateLabel: formatDate(dayAfterTomorrow) + getDayLabel(dayAfterTomorrow),
			time: '09:00',
			fullDate: dayAfterTomorrow
		});
		
		options.push({
			dateLabel: formatDate(day3),
			time: '09:00',
			fullDate: day3
		});
		
		return options;
	};
	
	const timeOptions = ref(generateTimeOptions());
	// picker 展示用的合并文案
	const pickerOptions = ref(['立即预约', ...timeOptions.value.map(t => `${t.dateLabel} ${t.time}`)]);
	
	// 当前日期文本
	const currentDateText = computed(() => {
		const now = new Date();
		const year = now.getFullYear();
		const month = now.getMonth() + 1;
		const day = now.getDate();
		const hour = now.getHours().toString().padStart(2, '0');
		const minute = now.getMinutes().toString().padStart(2, '0');
		return `(${year}年${month}月${day}日 ${hour}:${minute})`;
	});
	
	// 预约时间显示文本
	const appointmentTimeText = computed(() => {
		if (selectedTimeIndex.value === -1) return '';
		const time = timeOptions.value[selectedTimeIndex.value];
		if (time) {
			return `${time.dateLabel} ${time.time}`;
		}
		return '';
	});

	// 页面加载
	onLoad((options) => {
		// 从路由参数获取门店信息
		if (options.storeName) {
			storeInfo.value.name = decodeURIComponent(options.storeName);
		}
		if (options.storeAddress) {
			storeInfo.value.address = decodeURIComponent(options.storeAddress);
		}
		
		// 从路由参数获取选中的服务（JSON字符串）
		if (options.services) {
			try {
				selectedServiceList.value = JSON.parse(decodeURIComponent(options.services));
			} catch (e) {
				console.error('解析服务列表失败', e);
			}
		}
	});

	// 计算总价
	const totalPrice = computed(() => {
		const subtotal = selectedServiceList.value.reduce((total, service) => {
			return total + parseFloat(service.currentPrice || 0);
		}, 0);
		return (subtotal - discount.value).toFixed(2);
	});

	// 选择联系人
	const selectContact = () => {
		uni.showToast({
			title: '选择联系人',
			icon: 'none'
		});
	};

	// 选择预约时间
	const selectAppointmentTime = () => {
		if (timePopup.value) {
			// 已选 -1(立即预约) -> 0；否则+1
			tempPickerIndex.value = selectedTimeIndex.value === -1 ? 0 : selectedTimeIndex.value + 1;
			timePopup.value.open();
		}
	};

	// 滑动选择变更
	const onPickerChange = (e) => {
		const val = Array.isArray(e.detail.value) ? e.detail.value[0] : e.detail.value;
		tempPickerIndex.value = Number(val) || 0;
	};
	
	// 关闭时间选择弹窗
	const closeTimePopup = () => {
		if (timePopup.value) {
			timePopup.value.close();
		}
	};
	
	// 确认时间选择
	const confirmTimeSelection = () => {
		// 0 -> -1(立即预约)，否则减一
		selectedTimeIndex.value = tempPickerIndex.value === 0 ? -1 : tempPickerIndex.value - 1;
		closeTimePopup();
	};

	// 选择车辆
	const selectCar = () => {
		uni.navigateTo({
			url: '/pages/index/washCar/chooseCar/chooseCar'
		});
	};

	// 选择优惠券
	const selectCoupon = () => {
		uni.navigateTo({
			url: '/pages/index/washCar/coupon/coupon'
		});
	};

	// 联系客服
	const contactService = () => {
		const phone = contactInfo.value.phone || '';
		uni.showActionSheet({
			alertText: phone, // 顶部显示号码（微信/支持平台会生效）
			itemList: ['复制', '取消拨号'],
			success: (res) => {
				// 0: 复制；1: 取消拨号（不做处理）
				if (res.tapIndex === 0) {
					uni.setClipboardData({
						data: phone,
						success: () => {
							uni.showToast({ title: '号码已复制', icon: 'none' });
						}
					});
				}
			}
		});
	};

	// 提交订单
	const submitOrder = () => {
		// 打开支付弹窗
		payPassword.value = '';
		if (payPopup.value) payPopup.value.open();
	};

	const focusPayInput = () => {
		setTimeout(() => {
			try {
				payHiddenInput.value && payHiddenInput.value.focus && payHiddenInput.value.focus();
			} catch (e) {}
		}, 50);
	};

	const closePayPopup = () => {
		payPopup.value && payPopup.value.close();
	};

	const onPayInput = () => {
		if (payPassword.value.length >= 6) {
			// 模拟校验成功，跳转支付成功页
			closePayPopup();
			const amount = totalPrice.value;
			const orderNo = `${Date.now()}`;
			uni.navigateTo({
				url: `/pages/index/carMaintenance/ConOrder/PaySuccess?amount=${amount}&orderNo=${orderNo}`
			});
		}
	};

	// 返回
	const goBack = () => {
		uni.navigateBack();
	};
</script>

<style scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		background: #f5f5f5;
		display: flex;
		flex-direction: column;
	}

	/* 顶部导航栏 */
	.header {
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		flex-shrink: 0;
	}

	.nav-bar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 30rpx;
		padding-top: calc(20rpx + env(safe-area-inset-top));
	}

	.nav-left {
		width: 80rpx;
		display: flex;
		align-items: center;
		cursor: pointer;
	}

	.back-arrow {
		width: 24rpx;
		height: 24rpx;
		border-left: 4rpx solid #fff;
		border-bottom: 4rpx solid #fff;
		transform: rotate(45deg);
		margin-left: 10rpx;
	}

	.nav-title {
		flex: 1;
		text-align: center;
		font-size: 36rpx;
		font-weight: 500;
		color: #fff;
	}

	.nav-right {
		width: 80rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 8rpx;
	}

	.nav-icon-dot {
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	.nav-icon-line {
		width: 2rpx;
		height: 24rpx;
		background: #fff;
		margin: 0 4rpx;
	}

	.nav-icon-circle {
		width: 24rpx;
		height: 24rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		position: relative;
	}

	.nav-icon-circle::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 8rpx;
		height: 8rpx;
		background: #fff;
		border-radius: 50%;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		height: 0;
		padding: 30rpx;
		padding-bottom: 120rpx;
	}

	/* 进度指示器 */
	.progress-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		min-height: 120rpx;
	}

	.progress-step {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 0 0 auto;
		position: relative;
		z-index: 2;
		width: 120rpx;
	}

	.step-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.step-blue {
		background: #2477F4;
	}

	.step-green {
		background: #4CD964;
	}

	.step-orange {
		background: #FF6B35;
	}

	.step-text {
		font-size: 22rpx;
		color: #fff;
		font-weight: 500;
		text-align: center;
		line-height: 1.2;
		padding: 0 10rpx;
	}

	.progress-line {
		height: 0;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		z-index: 1;
		border-top: 2rpx dashed #e0e0e0;
		background: transparent;
		pointer-events: none;
	}

	.progress-line-1 {
		left: 150rpx;
		right: 150rpx;
	}

	.progress-line-2 {
		left: 50%;
		right: 150rpx;
		margin-left: 60rpx;
	}

	.progress-line.active {
		border-top-color: #4CD964;
	}

	/* 门店信息 */
	.store-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.store-icon {
		width: 60rpx;
		height: 60rpx;
		flex-shrink: 0;
	}

	.store-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		gap: 10rpx;
	}

	.store-name {
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}

	.store-address {
		font-size: 26rpx;
		color: #666;
	}

	/* 预约详情 */
	.appointment-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
	}

	.appointment-item {
		display: flex;
		align-items: center;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.appointment-item:last-child {
		border-bottom: none;
	}

	.appointment-icon {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.appointment-label {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.appointment-value {
		font-size: 28rpx;
		color: #666;
		margin-right: 20rpx;
	}

	.arrow-icon {
		width: 24rpx;
		height: 24rpx;
		flex-shrink: 0;
		transform: rotate(90deg);
	}

	/* 服务产品 */
	.service-products-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #000;
	}

	.section-count {
		font-size: 26rpx;
		color: #666;
	}

	.count-number {
		color: #2477F4;
		font-weight: 500;
	}

	.service-products-list {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.service-product-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.product-name {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.product-price {
		font-size: 28rpx;
		color: #FF6B35;
		font-weight: 500;
		flex-shrink: 0;
	}

	/* 优惠券 */
	.coupon-section {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.coupon-icon {
		width: 40rpx;
		height: 40rpx;
		flex-shrink: 0;
	}

	.coupon-label {
		font-size: 28rpx;
		color: #333;
		flex: 1;
	}

	.coupon-discount {
		font-size: 28rpx;
		color: #FF6B35;
		font-weight: 500;
		margin-right: 20rpx;
	}

	/* 底部固定栏 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: linear-gradient(180deg, #2477F4 0%, #166BEC 100%);
		padding: 20rpx 30rpx;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		gap: 20rpx;
		box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
		z-index: 100;
	}

	.service-btn {
		display: flex;
		align-items: center;
		gap: 8rpx;
		flex-shrink: 0;
	}

	.service-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.service-text {
		font-size: 28rpx;
		color: #fff;
	}

	.total-info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
	}

	.total-label {
		font-size: 28rpx;
		color: #fff;
	}

	.total-price {
		font-size: 36rpx;
		font-weight: 700;
		color: #FF6B35;
	}

	.submit-btn {
		width: 200rpx;
		height: 88rpx;
		background: linear-gradient(135deg, #2477F4 0%, #166BEC 100%);
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		box-shadow: 0 4rpx 12rpx rgba(36, 119, 244, 0.25);
	}

	.submit-text {
		font-size: 32rpx;
		font-weight: 500;
		color: #fff;
	}

	/* 支付弹窗 */
	.pay-popup {
		width: 640rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	.pay-header {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10rpx;
		margin-bottom: 20rpx;
	}
	.pay-title {
		font-size: 32rpx;
		color: #333;
	}
	.pay-subtitle {
		font-size: 24rpx;
		color: #999;
	}
	.pay-amount {
		font-size: 48rpx;
		color: #000;
		font-weight: 600;
		margin-top: 6rpx;
	}
	.pay-method-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		border-top: 1rpx solid #f0f0f0;
		border-bottom: 1rpx solid #f0f0f0;
	}
	.pay-method-label,
	.pay-method-value {
		font-size: 26rpx;
		color: #666;
	}
	.pay-password-box {
		margin: 24rpx 0;
		display: grid;
		grid-template-columns: repeat(6, 1fr);
		gap: 12rpx;
		position: relative;
	}
	.pay-digit {
		height: 80rpx;
		border: 1rpx solid #e5e5e5;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.pay-dot {
		width: 16rpx;
		height: 16rpx;
		background: #333;
		border-radius: 50%;
	}
	.pay-hidden-input {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0;
	}
	.pay-actions {
		display: flex;
		justify-content: center;
	}
	.pay-cancel {
		color: #666;
		font-size: 28rpx;
		padding: 12rpx 24rpx;
	}

	/* 预约时间选择弹窗 */
	.time-popup {
		width: 600rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 40rpx 30rpx 30rpx;
		box-sizing: border-box;
		max-width: 90%;
	}

	.popup-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #000;
		text-align: center;
		margin-bottom: 10rpx;
	}

	.popup-date-reference {
		font-size: 24rpx;
		color: #999;
		text-align: center;
		margin-bottom: 30rpx;
	}

	/* picker */
	.time-picker {
		height: 400rpx; /* 显示约5行，居中高亮 */
		margin-bottom: 30rpx;
	}
	.picker-item {
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 30rpx;
		color: #333;
	}

	.popup-buttons {
		display: flex;
		border-top: 1rpx solid #f0f0f0;
		padding-top: 20rpx;
		position: relative;
	}

	.popup-btn {
		flex: 1;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		border-radius: 10rpx;
		position: relative;
		cursor: pointer;
		transition: opacity 0.3s;
	}
	
	.popup-btn:active {
		opacity: 0.8;
	}

	.cancel-btn {
		color: #666;
		background: #f5f5f5;
		margin-right: 1rpx;
	}

	.confirm-btn {
		color: #fff;
		background: #2477F4;
		margin-left: 1rpx;
	}

	.popup-buttons::after {
		content: '';
		position: absolute;
		left: 50%;
		top: 20rpx;
		bottom: 0;
		width: 1rpx;
		background: #f0f0f0;
		transform: translateX(-50%);
	}
</style>
